 @font-face {
    font-family: 'BebasNeueRegular';
    src: url('../font/BebasNeue-webfont.eot');
    src: url('../font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/BebasNeue-webfont.woff') format('woff'),
         url('../font/BebasNeue-webfont.ttf') format('truetype'),
         url('../font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'linecons';
  src:url('../font/linecons.eot');
}
@font-face {
  font-family: 'linecons';
  src: url('../font/linecons.eot');
    src: url('../font/linecons.eot?#iefix') format('embedded-opentype'),
         url('../font/linecons.woff') format('woff'),
         url('../font/linecons.ttf') format('truetype'),
         url('../font/linecons.svg#BebasNeueRegular') format('svg');
   font-weight: normal;
  font-style: normal;
}
// Links
// -------------------------
@linkColor:             @white;
@linkColorHover:        @white;

// Typography
// -------------------------

@sansFontFamily:        'Open Sans', sans-serif;
@serifFontFamily:       Georgia, "Times New Roman", Times, serif;
@monoFontFamily:        Monaco, Menlo, Consolas, "Courier New", monospace;

@baseFontSize:          16px;
@baseFontFamily:        @sansFontFamily;
@baseLineHeight:        20px;
@altFontFamily:         @serifFontFamily;

@headingsFontFamily:    'BebasNeueRegular', sans-serif; // empty to use BS default, @baseFontFamily
@headingsFontWeight:    normal;    // instead of browser default, bold
@headingsColor:         inherit; // empty to use BS default, @textColor


// Buttons
// -------------------------
@btnBackground:                     @brickColor;
@btnBackgroundHighlight:            darken(@brickColorOdd, 10%);
@btnBorder:                         #ccc;

@btnPrimaryBackground:              @brickColorOdd;
@btnPrimaryBackgroundHighlight:     spin(@btnPrimaryBackground, 20%);

@btnInfoBackground:                 #5bc0de;
@btnInfoBackgroundHighlight:        #2f96b4;

@btnSuccessBackground:              #62c462;
@btnSuccessBackgroundHighlight:     #51a351;

@btnWarningBackground:              lighten(@orange, 15%);
@btnWarningBackgroundHighlight:     @orange;

@btnDangerBackground:               #ee5f5b;
@btnDangerBackgroundHighlight:      #bd362f;

@btnInverseBackground:              #444;
@btnInverseBackgroundHighlight:     @grayDarker;

// Component sizing
// -------------------------
// Based on 14px font-size and 20px line-height

@fontSizeLarge:         @baseFontSize * 1.25; // ~18px
@fontSizeSmall:         @baseFontSize * 0.85; // ~12px
@fontSizeMini:          @baseFontSize * 0.75; // ~11px

@paddingLarge:          15px 25px; // 44px
@paddingSmall:          2px 10px;  // 26px
@paddingMini:           0 6px;   // 22px

@baseBorderRadius:      0;
@borderRadiusLarge:     0;
@borderRadiusSmall:     0;


// Navbar
// -------------------------
@navbarCollapseWidth:             979px;
@navbarCollapseDesktopWidth:      @navbarCollapseWidth + 1;

@navbarHeight:                    50px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      @white;
@navbarLinkColor:                 @white;
@navbarLinkColorHover:            @brickColor;
@navbarLinkColorActive:           @brickColor;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

@navbarBrandColor:                @navbarLinkColor;


// BRICK
// -------------------------------------------------- 
@brickColumns: 			6;
@brickWidth: 			195px;
@brickHeigh: 			@brickWidth;
@brickGutterWidth: 		0px;


@brickWidth768:      128px;
@brickHeigh768:      @brickWidth768;
@brickGutterWidth:    0px;

// Violet
// @brickColor:       #7a74f6; 
// @brickColorOdd:    #544ad8;

// Orange
// @brickColor: 			#f58239; 
// @brickColorOdd: 		#f64f35;

// Default
@main_bg : url(../img/header-bg.jpg);
@brickColor:       #33CC66; 
@brickColorOdd:    #339966;

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
  font-family: 'linecons';
  content: attr(data-icon);
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

/* Use the following CSS code if you want to have a class per icon */
[class^="li_"]:before, [class*=" li_"]:before {
  font-family: 'linecons';
  font-style: normal;
  speak: none;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.li_heart:before {
  content: "\e000";
}
.li_cloud:before {
  content: "\e001";
}
.li_star:before {
  content: "\e002";
}
.li_tv:before {
  content: "\e003";
}
.li_sound:before {
  content: "\e004";
}
.li_video:before {
  content: "\e005";
}
.li_trash:before {
  content: "\e006";
}
.li_user:before {
  content: "\e007";
}
.li_key:before {
  content: "\e008";
}
.li_search:before {
  content: "\e009";
}
.li_settings:before {
  content: "\e00a";
}
.li_camera:before {
  content: "\e00b";
}
.li_tag:before {
  content: "\e00c";
}
.li_lock:before {
  content: "\e00d";
}
.li_bulb:before {
  content: "\e00e";
}
.li_pen:before {
  content: "\e00f";
}
.li_diamond:before {
  content: "\e010";
}
.li_display:before {
  content: "\e011";
}
.li_location:before {
  content: "\e012";
}
.li_eye:before {
  content: "\e013";
}
.li_bubble:before {
  content: "\e014";
}
.li_stack:before {
  content: "\e015";
}
.li_cup:before {
  content: "\e016";
}
.li_phone:before {
  content: "\e017";
}
.li_news:before {
  content: "\e018";
}
.li_mail:before {
  content: "\e019";
}
.li_like:before {
  content: "\e01a";
}
.li_photo:before {
  content: "\e01b";
}
.li_note:before {
  content: "\e01c";
}
.li_clock:before {
  content: "\e01d";
}
.li_paperplane:before {
  content: "\e01e";
}
.li_params:before {
  content: "\e01f";
}
.li_banknote:before {
  content: "\e020";
}
.li_data:before {
  content: "\e021";
}
.li_music:before {
  content: "\e022";
}
.li_megaphone:before {
  content: "\e023";
}
.li_study:before {
  content: "\e024";
}
.li_lab:before {
  content: "\e025";
}
.li_food:before {
  content: "\e026";
}
.li_t-shirt:before {
  content: "\e027";
}
.li_fire:before {
  content: "\e028";
}
.li_clip:before {
  content: "\e029";
}
.li_shop:before {
  content: "\e02a";
}
.li_calendar:before {
  content: "\e02b";
}
.li_vallet:before {
  content: "\e02c";
}
.li_vynil:before {
  content: "\e02d";
}
.li_truck:before {
  content: "\e02e";
}
.li_world:before {
  content: "\e02f";
}


// The Brick Grid
#brick {

  .core (@brickWidth, @brickGutterWidth) {

    .brickX (@index) when (@index > 0) {
      .brick@{index} { .brick(@index); }
      .brickX(@index - 1);
    }
    .brickX (0) {}

    .boffsetX (@index) when (@index > 0) {
      .boffset@{index} { .boffset(@index); }
      .boffsetX(@index - 1);
    }
    .boffsetX (0) {}

    .boffset (@brickColumns) {
      margin-left: (@brickWidth * @brickColumns) + (@brickGutterWidth * (@brickColumns + 1));
    }

    .brick (@brickColumns) {
      width: (@brickWidth * @brickColumns) + (@brickGutterWidth * (@brickColumns - 1));
      height: @brickWidth;
    }

    .brow {
      margin-left: @brickGutterWidth * -1;
      .clearfix();
    }

    [class*="brick"] {
      float: left;
      min-height: 1px; // prevent collapsing brickColumns
      margin-left: @brickGutterWidth;
    }
 	  .navbar .container{ width: (@brickWidth * @brickColumns) + (@brickGutterWidth * (@brickColumns - 1)); }
 	  
    // generate .brickX and .boffsetX
    .brickX (@brickColumns);
    .boffsetX (@brickColumns);

  }
}

.transform-style(@style){
    -webkit-transform-style: @style;
     -moz-transform-style: @style;
      -ms-transform-style: @style;
          transform-style: @style;
}
.box-shadow2(@shadow1,@shadow2) {
  -webkit-box-shadow: @shadow1,@shadow2;
     -moz-box-shadow: @shadow1,@shadow2;
          box-shadow: @shadow1,@shadow2;
}
.perspective(@px){
    -webkit-perspective:@px;    
       -moz-perspective:@px;
        -ms-perspective:@px;          
         -o-perspective:@px;
            perspective:@px;
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
     -moz-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees);
       -o-transform: rotateY(@degrees);
          transform: rotateY(@degrees);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
     -moz-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees);
       -o-transform: rotateX(@degrees);
          transform: rotateX(@degrees);
}

.rgba(@colour, @alpha)
{
    @alphaColour: hsla(hue(@colour), saturation(@colour), lightness(@colour), @alpha);
    @ieAlphaColour: argb(@alphaColour);
     
    background-color: @colour; // Fallback for older browsers
    background-color: @alphaColour;
     
    // IE hacks
    zoom: 1; // hasLayout
    background-color: transparent\9;
    -ms-filter:  "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 8+
        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieAlphaColour}, endColorstr=@{ieAlphaColour})"; // IE 6 & 7
     
}
.bg-cover(){
   -webkit-background-size: 100%; 
    -moz-background-size: 100%; 
    -o-background-size: 100%; 
    background-size: 100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}